<template>
	<view class="headesImg">
		<text>当前头像</text>
		<view class="headesBox">
			<image v-if="avarShow" @click="cheangeHeadThumb" :src="newImgul" mode=""></image>
			<image v-else @click="cheangeHeadThumb" :src="userInfo.avatar" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList1: [],
				userInfo: '',
				newImgul: '',
				avarShow: false
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
		},
		methods:{
			cheangeHeadThumb(way) {
				console.log(1)
				uni.chooseImage({
					count: 1,	// 头像只上传1张
					sourceType: [way],	// way是点击时传入的打开方式相机或相册
					success: async (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: '上传中'  
						});
						uni.uploadFile({
							url: this.baseurl + '/index.php/api/index/upload',	// 上传地址（七牛云）
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								token: this.userInfo.token, //头像token，参考返回数据
								key: chooseImageRes.tempFiles[0].name // 图片名，移动端可能不存在name，可修改为 key: new Date().getTime()+".png" 随机
							},
							success: (uploadFileRes) => {
								// console.log(uploadFileRes);是一个字符串
								const data = JSON.parse(uploadFileRes.data)
								this.newImgul = data.code.url;
								console.log(this.newImgul)
								console.log(data)
								uni.showToast({//提示
								  title:data.msg,
									mask:true,
									position:"center",
									duration: 1000
								})
								this.avarShow = true;
								// 上传头像接口（参数根据自己的来）
								// this.$api.api.user.updateHead({
								// 	"creator": this.$store.state.loginName,	//上传者
								// 	"headPath": "http://qapxsiqga.bkt.clouddn.com/"+data.key,	// 图片最终的路径，http://qapxsiqga.bkt.clouddn.com/是七牛云空间地址
								// 	"userId": userId
								// }).then(res=>{
								// 	console.log(res)
								// 	this.avar = "http://qapxsiqga.bkt.clouddn.com/"+data.key	// 存入修改后的头像
								// 	this.avarShow = true	// 显示修改后的头像
								// })
							}
						});
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.headesImg {
		padding: 0 64rpx;
		text {
			display: block;
			padding: 50rpx 0;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 44rpx;
		}
		text-align: center;
		.headesBox {
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
			margin: 0 auto;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}	
	}
</style>
